let path=require('path');
// 启用热更新

let webpack = require('webpack');
let VueLoaderPlugin = require('vue-loader/lib/plugin');
// 只要是插件都要到plugins里面去
let HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
   module:{
       rules:[
           {test:/\.css$/,use:[
               {
                   loader:'style-loader',
                  options:{
                      insertAt:'top'
                  }
                },
                'css-loader',
           ]
        },
 {
     test:/vue-preview.src.*?js/,
     loader:'babel'
 },
        // {
        //     test: /vue-preview.src.*?js$/,
        //     loader: 'babel-loader'
        // },
        // // 在处理url（）请求的配置中加入：svg的配置
        // {
        //     test: /\.(jpg|png|gif|ttf|svg)$/,
        //     loader: "url-loader?limit=40000"
        // },
           {
               test:/\.less$/,
               use:[
               {
                loader:'style-loader',
                options:{
                    insertAt:'top'
                }
               },
               'css-loader',
               'less-loader'    
               ]
           },
           {
               test:/\.vue$/,use:'vue-loader'//处理.vue
           },
           {
               test:/\.scss$/,use:[
                   {
                    loader:'style-loader',
                    // options:{
                    //     insertAt:'top'
                    // }
                   },
                   'css-loader',
                   'sass-loader'
               ]
           },
           
           {test:/\.(jpg|png|jpeg|bmp)$/,use:[
               {loader:'url-loader',
               options:{
                limit:23498,
                // publicPath:'http://www.zyf.com.cn'
                name:'[hash:7]?[name].[ext]'
               }
            }
           ]
        },
        {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
        {test:/\.js$/,
            exclude:/node_modules/,//排除
            // include:path.resolve('src'),//包含
            use:{
                loader:'babel-loader',
                options:{
                    presets:[
                        '@babel/preset-env',
                        '@babel/preset-react'
                    ],
                    plugins:[
                        '@babel/plugin-syntax-dynamic-import'
                    ]
                }
            }
    },
       ]
   },
    devServer:{
        port:3000,
        progress:true,
        // contentBase:'./src',
        compress:true,
        open:true,//自动拉起浏览器
        hot:true,//热加载
    },
    // 多入口
    mode:'development',
    entry:{
       main:'./src/main.js',
    },
    output:{
        filename:'build.js',
        path:path.resolve(__dirname,'dist')
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({//生成HTML页面的插件
            template:'./src/index.html',//指定模板页面,将来会根据指定的页面路径,去生成内存中的页面
            filename:'index.html',//指定生成的页面的名称
            // chunks:['home']
        }),
        new webpack.HotModuleReplacementPlugin()
    //     new HtmlWebpackPlugin({
    //         template:'./index.html',
    //         filename:'other.html',
    //         chunks:['other']
    //     })
    ],
    resolve:{
        // extensions:['.js','.vue','.json'],
        // alias:{
        //     'vue$':'vue/dist/vue.esm.js'
        // }
    },
    
}